<template>
	<view id="xfTable">
		<uni-table border stripe :type="type" :radio="radio" :style="{maxHeight: height+'px',overflowY: 'auto',}" emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr id="tHeard">
				<uni-th style="color: #fff;" align="center" v-for="(item,key) of title" :width="item.width" :key="'title'+key" >{{item.title}}</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(tr,yIndex) of data" :row='tr' :yIndex='yIndex' :style="{backgroundColor: selectIndex===yIndex? '#a4dbf5':'#fff'}" :key="'tc'+yIndex" @rowClick="selectChange">
				<uni-td v-for="(items,akey) of title" :key="'ia'+akey" :style="tdStyle">
					<view v-if="typeof tr[items.key] == 'object'">
						<view v-for="(cItem,ckey) of tr[items.key]" :key = "'c'+ckey" style="text-align: center;">
							{{cItem}}
						</view>
					</view>
					<view v-else-if="items.type === 'button'">
						<view style="float:left;" v-for="(buttons,index) of items.buttonList" :key="'buttons'+index">
		<!-- 					<el-Button class="more	nButton"  @click="clickButton(cItem,keyas,item,yIndex)">
								
							</el-Button> -->
							<uni-button style="padding: 0 10px;" type="primary" size="mini" :plain="true" :disabled="buttons.sDisabled" @click.stop="clickButton(tr,yIndex,buttons,index)">{{buttons.title}}</uni-button>
						</view>
					</view>
					<view v-else style="text-align: center;">
						{{tr[items.key]}}
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>

</template>

<script>
	import uniTable from "../uni-table/components/uni-table/uni-table.vue"
	import uniTr from "../uni-table/components/uni-tr/uni-tr.vue"
	import uniTd from "../uni-table/components/uni-td/uni-td.vue"
	import uniTbody from "../uni-table/components/uni-tbody/uni-tbody.vue"
	import uniTh from "../uni-table/components/uni-th/uni-th.vue"
	export default {
		name: '',
		components: {uniTable,uniTr,uniTd,uniTbody,uniTh,},
		props:{
			title:{
				type:Array,
				default:()=>[],
			},
			data:{
				type:Array,
				default:()=>[],
			},
			type:{
				type:String,
				default:""
			},
			radio:{
				type:Boolean,
				default:false,
			},
			tdStyle:{
				type: Object,
				default:()=>{}
			},
			height:{
				type: Number,
			}
		},
		data() {
			return {
				selectIndex:null,
				topHeight:null,
			}
		},
		mounted() {
			this.init();
			
			
		},
		methods: {
			init(){
				if(this.height!=undefined){
					let that = this;
					let info = uni.createSelectorQuery().select("#tHeard");
					info.boundingClientRect(function(data) { //data - 各种参数
						console.log(data.height) // 获取元素宽度
						that.topHeight = data.height;
					}).exec()
				}
			},
			clickButton(tr,yIndex,buttons,index){
				var data = {
					rowData:tr,
					dataIndex:yIndex,
					buttonIndex:index,
					buttonInfo:buttons
				}
				this.$emit('clickButton',data)
			},
			selectChange(data){
				console.log(data)
				this.selectIndex = data.index;
				this.$emit('getRow',data)
			},
			clearSelect(){
				this.selectIndex = null;
			}
		}
	}

</script>

<style scoped lang="scss">
	#xfTable /deep/ .uni-table-th{
		// padding: 10px;
		background-color: #a1caea;
		color: #6a8bbe;
		// font-size: 26px;
	}
	#xfTable /deep/ 	.uni-table-td{
		color: #7b98d2;
		// font-size: 26px;
		line-height: 30px;
		
	}
	#tHeard{
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 4;
	}
</style>